<script setup>
import {computed, onMounted, reactive} from "vue";
import {onBeforeRouteUpdate, useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";

const info=reactive({
  isCollapse:false,
  text: '农险互助管理系统',
  dynamicBreadcrumb:[] //动态面包屑
})
const close = () => {
  info.isCollapse = true
  info.text=''
}
//定义了 onMounted 函数，
// 它将 info 对象的 isCollapse 属性设置为 false，
// 并在 400 毫秒后更新 text 属性
const on = () => {
  info.isCollapse = false
  setTimeout(() => {
    info.text = '农险互助管理系统'
  }, 300)
}
//动态面包屑
const router = useRouter();
onMounted(()=>{
  router.afterEach(route => {
    //与给定路由地址匹配的标准化的路由记录数组。
    const  matchedRoutes =  route.matched;
    const dynamicBreadcrumb = []
    for (const route of matchedRoutes){
      if(route.meta && route.meta.breadcrumb){
        dynamicBreadcrumb.push({
          name:route.meta.breadcrumb,
          path:route.path
        })
      }
    }
    //赋值
    info.dynamicBreadcrumb = dynamicBreadcrumb
  })
})
// ====================>>>> 动态标签开始 ======================
const route = useRoute();
const store = useStore();
// 获取vuex里面所有的tag
const tagsList = computed(() => store.state.tagsList)
// 关闭一个标签
const closeTags = index => {
  //获取删除的标签的信息
  const delItem = tagsList.value[index];

  //让vuex删除指定的标签
  store.commit('delTagsItem', { index });

  // 如果关闭的是当前标签且标签不止一个，则激活前一个标签，如果关闭的是不是当前标签且标签不止一个，则激活后一个标签
  const item = tagsList.value[index] ? tagsList.value[index] : tagsList.value[index - 1];
  if (item) {
    // 如果删除的是当前标签，则跳往上面item判断好的目标标签的地址
    if (isActive(delItem.path)) {
      router.push(item.path)
    }
  } else {
    // 如果tagsList只有一个标签，删除了标签就没有标签，则跳转到首页
    router.push("/");
  }
}

// 设置标签
const setTags = (route) => {
  const isExist = tagsList.value.some(item => item.path === route.fullPath)
  if (!isExist) {
    // tag超过5个就删除第一个
    if (tagsList.value.length >= 10) {
      store.commit('delTagsItem', { index: 1 })
    }
    store.commit('setTagsItem', {
      name: route.name,
      path: route.fullPath,
      title: route.meta.title
    })
  }
}
//首次加载页面的时候便添加标签页
setTags(route);

// 监听路由变化，在当前页面即将要离开的时候触发
onBeforeRouteUpdate((to) => {
  setTags(to)
})

// 关全部标签
const closeAll = () => {
  store.commit('clearTags');
  router.push("/");
}

// 关闭其它标签
const closeOther = () => {
  const curItem = tagsList.value.filter(item => {
    return item.path === route.fullPath;
  })
  store.commit('clearTagsOther', curItem);
}
// 显示标签栏
const showTags = computed(() => tagsList.value.length > 0)

// 判断tag是否被激活,如果被激活就高亮当前标签
const isActive = path => path === route.fullPath
// ====================>>>> 动态标签结束 ======================
</script>

<template>
  <div class="common-layout">
    <el-container style="height: 100vh"><!--这里vh是指可视化的高度，即能在页面看到的高度-->
      <!--菜单，宽度为200像素-->
      <el-aside width="200" style="background-color: #545c64">
        <div style="background-color: white;height: 60px;font-family: 黑体;font-size: 18px;line-height: 60px;text-align: center">
          <template v-if="!info.isCollapse">
            {{info.text}}
          </template>
          <template v-else>
            <el-icon><Guide /></el-icon>
          </template>
        </div>
        <!--导航菜单-->
        <!--Collapse折叠面板控制，true为关闭-->
        <div>
          <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
              @open="handleOpen"
              @close="handleClose"
              router
              :collapse="info.isCollapse"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><OfficeBuilding /></el-icon>
                <span>企业管理</span>
              </template>
              <el-menu-item index="/companyInfo"><el-icon><Document /></el-icon>企业信息</el-menu-item>
              <el-menu-item index="/workerInfo"><el-icon><UserFilled /></el-icon>员工信息</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><location /></el-icon>
                <span>保单管理</span>
              </template>
              <el-menu-item index="/insurancePolicy"><el-icon><Film /></el-icon>保单信息</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><Tickets /></el-icon>
                <span>报案管理</span>
              </template>
              <el-menu-item index="/claimReport"><el-icon><Fries /></el-icon>报案信息</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <el-icon><CollectionTag /></el-icon>
                <span>调度管理</span>
              </template>
              <el-menu-item index="/assign"><el-icon><Reading /></el-icon>任务指派</el-menu-item>
              <el-menu-item index="/dispatchInfo"><el-icon><EditPen /></el-icon>调度信息</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <el-icon><CameraFilled /></el-icon>
                <span>图像处理</span>
              </template>
              <el-menu-item index="/imagesInfo"><el-icon><PictureFilled /></el-icon>信息采集</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="9">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>系统设置</span>
              </template>
              <el-menu-item index="/resourceSetting"><el-icon><Fries /></el-icon>数据同步</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <!--首页-->
        <el-header style="background-color: darkcyan;border-bottom: 2px solid gainsboro">
          <div style="display: flex; width: 100%;height: 60px">
            <div style="display:flex;flex:1 ;align-items: center;width: 90%">
              <el-icon style="cursor: pointer" @click="info.isCollapse ? on() : close()">
                <template v-if="!info.isCollapse">
                  <Fold />
                </template>
                <template v-else>
                  <Expand />
                </template>
              </el-icon>
              <!--面包屑-->
              <el-breadcrumb :separator-icon="ArrowRight" style="display: inline-block;margin-left: 10px">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <!--动态面包屑-->
                <el-breadcrumb-item v-for="(item,index) in info.dynamicBreadcrumb" :key="index">{{item.name}}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div style="width:80px ;height: 60px;display:flex;align-items: center">
              <el-dropdown>
    <span class="el-dropdown-link">
      <el-avatar src="../assets/images/33.jpg"/>
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item>修改密码</el-dropdown-item>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        <!-- 动态标签tags栏 -->
        <div class="tagList" v-if="showTags">
          <ul>
            <li v-for="(item, index) in tagsList" :class="{ 'active': isActive(item.path) }"
                :key="index">
              <router-link :to="item.path" class="tag" >
                {{ item.title }}
              </router-link>
              <el-icon v-if="item.title!='首页'" @click="closeTags(index)" class="close">
                <Close style="font-size: 11px;"/>
              </el-icon>
            </li>
          </ul>
          <!--            <el-dropdown>
                        <el-button type="primary">
                          标签选项
                          <el-icon>
                            <ArrowDown />
                          </el-icon>
                        </el-button>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item @click.native="closeOther">关闭其它</el-dropdown-item>
                            <el-dropdown-item @click.native="closeAll">关闭所有</el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>-->

        </div>
        <!--动态显示数据-->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>

</style>